<template>
    <div class="user-announcements">
      <h2>公告列表</h2>
      <el-card v-for="announcement in announcements" :key="announcement.id" class="announcement-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span>{{ announcement.title }}</span>
            <span class="date">{{ announcement.publishDate }}</span>
          </div>
        </template>
        <p>{{ announcement.content }}</p>
      </el-card>
      <el-empty v-if="announcements.length === 0 && !loading" description="暂无公告"></el-empty>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { fetchAnnouncements } from '../../api'
  import { ElMessage } from 'element-plus'
  
  const announcements = ref([])
  const loading = ref(false)
  
  onMounted(async () => {
    loading.value = true
    try {
      const response = await fetchAnnouncements()
      if (response.data.success) {
        announcements.value = response.data.data
      } else {
        ElMessage.error(response.data.message || '获取公告失败！')
      }
    } catch (error) {
      ElMessage.error('加载公告出错！')
      console.error('Failed to fetch announcements:', error)
    } finally {
      loading.value = false
    }
  })
  </script>
  
  <style scoped>
  .user-announcements {
    padding: 20px;
  }
  
  .announcement-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
  }
  
  .date {
    font-size: 0.9em;
    color: #999;
  }
  </style>